'use client'

import { ReactNode } from "react"
import { useRouter } from "next/navigation"

import {
    Dialog,
    DialogContent,
    DialogTrigger
} from "@/components/ui/dialog"
import LoginForm from "@/components/auth/login-form"

type LoginButtonProps = {
    mode?: 'modal' | 'redirect'

    asChild?: boolean
    children: ReactNode
}

const LoginButton = ({ mode, asChild, children }: LoginButtonProps) => {
    const router = useRouter()

    const onClick = () => {
        router.push('/auth/login')
    }

    if (mode === 'modal') {
        return (
            <Dialog>
                <DialogTrigger asChild={asChild}>
                    {children}
                </DialogTrigger>
                <DialogContent className="p-0 w-auto bg-transparent border-none">
                    <LoginForm />
                </DialogContent>
            </Dialog>
        )
    }

    return (
        <span
            className="cursor-pointer"
            onClick={onClick}
        >
            {children}
        </span>
    )
}

export default LoginButton;